<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册界面</title>
<!-- 引入boostarp的样式 -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入日期插件的样式 -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

	<div class="container">
	
		<div class="panel panel-primary center-block" style="width:600px;">
			<div class="panel-heading">
				<h3 class="panel-title">注册</h3>
			</div>
			<div class="panel-body">
				<form action="${pageContext.request.contextPath }/regist" class="form-horizontal" method="post" autocomplete="off">
				
					<div class="form-group">
						<label class="col-md-3 control-label">账号</label>
						<div class="col-md-6">
							<input class="form-control" name="account"  placeholder="必须为数字">
							<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">昵称</label>
						<div class="col-md-6">
							<input class="form-control" name="name"  placeholder="随意">
							<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">密码</label>
						<div class="col-md-6">
							<input id="password" class="form-control" name="password" type="password"  placeholder="建议为英文字母和数字结合">
						<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">确认密码</label>
						<div class="col-md-6">
							<input class="form-control" name="repassword" type="password">
							<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">头像</label>
						<div class="col-md-6">
							<input class="form-control" name="headUrl" type="file">
							
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">性别</label>
						<div class="col-md-6" style="line-height:34px;">
							<input name="gender" type="radio" value="男" checked="checked">男
							<input name="gender" type="radio" value="女" style="margin-left:50px;">女
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">出生日期</label>
						<div class="col-md-6" >
							<input id="birthday" class="form-control" name="birthday">
							<span></span>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-md-3 control-label">QQ</label>
						<div class="col-md-6" >
							<input class="form-control" name="qq" placeholder="填数字">
							<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">Email</label>
						<div class="col-md-6" >
							<input class="form-control" name="email" placeholder="qq邮箱/新浪邮箱/谷歌邮箱等">
							<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">手机</label>
						
						<div class="col-md-6" >
							<input class="form-control" name="phone"  placeholder="手机号码为11位">
							<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">微信</label>
						
						<div class="col-md-6" >
							<input class="form-control" name="wechat">
							<span></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-3 control-label">自我介绍</label>
						<div class="col-md-6" >
							<textarea class="form-control" name="introduction"></textarea>
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-md-12">
							<input class="btn btn-primary btn-block" type="submit" value="注册">
						</div>
					</div>
				
				</form>
			</div>
		</div>
	
	</div>
	
	<!-- 引入jQuery的js -->
	<script src="${pageContext.request.contextPath }/static/plugins/jquery-1.11.3.min.js"></script>
	<!-- 引入bootstrap的js -->
	<script src="${pageContext.request.contextPath }/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	
	<script src="${pageContext.request.contextPath }/static/plugins/bootstrap-datetimepicker/moment.js"></script>
	<!-- 引入日历插件的js -->
	<script src="${pageContext.request.contextPath }/static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	
	<script src="${pageContext.request.contextPath }/static/plugins/bootstrap-datetimepicker/zh-cn.js"></script>
	
	<script src="${pageContext.request.contextPath }/static/plugins/jquery-validation-1.16.0/jquery.validate.min.js"></script>
	
	<script src="${pageContext.request.contextPath }/static/plugins/jquery-validation-1.16.0/localization/messages_zh.min.js"></script>
	
	<script type="text/javascript">
		
	$(function(){
		
		$('#birthday').datetimepicker({
			format: 'YYYY-MM-DD HH:mm:ss',  //格式
			locale: 'zh_CN'  //中文
		});
		
		$('form').validate({
			rules:{
				account:{
					required:true
				},
				name:{
					required:true
				},
				qq:{
					required:true
				},
				phone:{
					required:true
				},
				wechat:{
					required:true
				},
				password:{
					required:true,
					rangelength:[6,12]
				},
				repassword:{
					equalTo:'#password'
				},
				
				
			},
			messages:{
				account:{
					required:'账号必填'
				},
				name:{
					required:'昵称必填'
				},
				qq:{
					required:'qq必填'
				},
				phone:{
					required:'电话必填'
				},
				wechat:{
					required:'微信必填'
				},
				password:{
					required:'密码必填',
					rangelength: '密码长度必须在{0}-{1}之间'
				},
				repassword:{
					equalTo:'两次密码不一致'
				},
				
			},
			errorPlaccment:function(error,input){
				input.parcnt().next().append(error);
			},
			success:function(error){
				error.html('<i class="fa fa-check-circle success"><i>');
			}
			
			
		});
		
		
	});
	
	
	
	</script>

</body>
</html>